<script lang="tsx" setup>
import { emptyHandle } from '@vc/utils';
import { getCompanyBasicInfo } from '../apis';
import LoadErrorDeal from '@/components/load-error-deal/index.vue';
import type { IColumnsOption } from 'vc';
import { toF9 } from '@/utils';

interface Props {
  id: string;
  show: boolean;
  companyName: string;
}

const { id, show, companyName } = defineProps<Props>();

const emits = defineEmits(['update:show']);

const showValue = computed({
  get() {
    return show;
  },
  set(value) {
    emits('update:show', value);
  }
});

const {
  data: infoData,
  loading,
  error
} = useRequest(getCompanyBasicInfo, {
  defaultParams: [id],
  onSuccess(data) {
    data?.shareholders.forEach((item, index) => {
      let share_data = Number(item.subscribedAmount.substring(0, item.subscribedAmount.length - 1));
      let new_data: string;
      if (share_data) {
        if (share_data / 100000000 >= 1) new_data = (share_data / 100000000).toFixed(2) + '亿股';
        else if (share_data / 10000 >= 1) new_data = (share_data / 10000).toFixed(2) + '万股';
        else new_data = share_data.toFixed(2) + '股';
      } else {
        new_data = '-';
      }
      data.shareholders[index].subscribedAmount = new_data;
    });
  }
});

// 工商信息
const businessInfo = computed(() => {
  const businessInfo = infoData.value?.businessInfo ?? {};

  return [
    { name: '企业名称', value: businessInfo?.companyName },
    { name: '统一社会信用代码', value: businessInfo?.unifiedSocialCreditCode },
    { name: '法定代表人', value: businessInfo?.legalRepresentative },
    { name: '登记状态', value: businessInfo?.companyState },
    { name: '成立日期', value: businessInfo?.foundationDate },
    { name: '企业类型', value: businessInfo?.companyType },
    { name: '注册资本', value: businessInfo?.registeredCapital },
    {
      name: '营业期限',
      value: emptyHandle(businessInfo?.businessTermStartDate) + ' 至 ' + emptyHandle(businessInfo?.businessTermEndDate)
    },
    { name: '曾用名', value: businessInfo?.companyFormerName?.map(i => i.formerName).join(';') || '' },
    { name: '所属行业', value: businessInfo?.industryCategory },
    { name: '所属地区', value: businessInfo?.registeredRegion },
    { name: '注册地址', value: businessInfo?.registeredAddress, span: 3 },
    { name: '经营范围', value: businessInfo?.businessScope, span: 5 }
  ];
});

const labelsRender = (labels: any[]) => {
  return labels?.map((tag, key) => {
    return (
      <span class="labels" style={{ color: tag.color, background: tag.bgColor, marginLeft: '5px' }} key={key}>
        {tag.name}
      </span>
    );
  });
};

const infoTables = computed(() => {
  // 股东信息
  const shareholders: IColumnsOption[] = [
    { title: '序号', type: 'seq', width: 70, align: 'center' },
    {
      title: '股东名称',
      field: 'companyName',
      slots: {
        default({ row }) {
          return (
            <div>
              <span class={{ companyName: !!row.companyId }} onClick={() => toF9(row.companyId)}>
                {row?.companyName}
              </span>
              {labelsRender(row.labels)}
            </div>
          );
        }
      }
    },
    {
      title: '持股比例',
      field: 'shareholdingRatio',
      width: 200,
      align: 'center'
    },
    {
      title: '持股数量',
      field: 'subscribedAmount',
      width: 200,
      align: 'center'
    }
  ];
  // 主要人员
  const seniorManagements: IColumnsOption[] = [
    { title: '序号', type: 'seq', width: 70, align: 'center' },
    {
      title: '姓名',
      field: 'name',
      align: 'center'
    },
    {
      title: '职位',
      field: 'position',
      align: 'center'
    }
  ];
  // 对外投资
  const investments: IColumnsOption[] = [
    { title: '序号', type: 'seq', width: 70, align: 'center' },
    {
      title: '股东名称',
      field: 'companyName',
      minWidth: 400,
      slots: {
        default({ row }) {
          return (
            <div>
              <span class={{ companyName: !!row.companyId }} onClick={() => toF9(row.companyId)}>
                {row?.companyName}
              </span>
              {labelsRender(row.labels)}
            </div>
          );
        }
      }
    },
    {
      title: '持股比例',
      width: 120,
      field: 'shareholdingRatio',
      align: 'center'
    },
    {
      title: '认缴出资额',
      field: 'subscribedAmount',
      align: 'center'
    },
    {
      title: '注册资本',
      field: 'registeredCapital',
      align: 'center'
    },
    {
      title: '成立日期',
      width: 120,
      field: 'foundationDate',
      align: 'center'
    }
  ];
  // 供应商
  const suppliers: IColumnsOption[] = [
    { title: '序号', type: 'seq', width: 70, align: 'center' },
    {
      title: '股东名称',
      field: 'companyName',
      slots: {
        default({ row }) {
          return (
            <div>
              <span class={{ companyName: !!row.companyId }} onClick={() => toF9(row.companyId)}>
                {row?.companyName}
              </span>
              {labelsRender(row.labels)}
            </div>
          );
        }
      }
    },
    {
      title: '报告期',
      field: 'latestReportingPeriod',
      align: 'center',
      width: 200
    }
  ];
  return [
    { title: '股东信息', columns: shareholders, name: 'shareholders', tableData: infoData.value?.shareholders },
    { title: '主要人员', columns: seniorManagements, name: 'seniorManagements', tableData: infoData.value?.seniorManagements },
    { title: '对外投资', columns: investments, name: 'investments', tableData: infoData.value?.investments },
    { title: '供应商', columns: suppliers, name: 'suppliers', tableData: infoData.value?.suppliers }
  ];
});

// const pageNum = reactive(
//   {
//     'shareholders': 1,
//     'seniorManagements': 1,
//     'investments': 1,
//     'suppliers': 1
//   }
// );


</script>
<template>
  <vc-dialog v-model="showValue" ref="baseInfo" :title="companyName" width="1200" height="800">
    <LoadErrorDeal v-if="loading || error || !infoData" :loading="loading" :error="error" :isNoData="!infoData" />
    <div v-else>
      <div class="item">
        <div class="title">企业工商信息</div>
        <vc-descriptions :column="3" border size="small" class="descriptions-content">
          <vc-descriptions-item v-for="(sub_item, sub_index) in businessInfo" :key="sub_index" :label="sub_item.name"
            :span="sub_item.span" label-align="left" :width="158">
            <template v-if="sub_item.name === '经营范围'">
              <vc-clamp-toggle :maxLines="2" :text="emptyHandle(sub_item.value)" :toggleText="['展开', '收起']" />
            </template>
            <vc-clamp v-else autoResize :title="sub_item.value" :text="emptyHandle(sub_item.value)" />
          </vc-descriptions-item>
        </vc-descriptions>
      </div>
      <template v-for="(item, index) in infoTables" :key="index">
        <div class="item" v-if="infoData[item.name].length">
          <div class="title">{{ item.title }}</div>
          <vc-table :maxHeight="478" :pageSize="10" :ref="item.name" :columns="item.columns"
            :tableData="infoData[item.name]" />
        </div>
      </template>
    </div>
  </vc-dialog>
</template>
<style lang="scss" scoped>
.item {
  padding: 10px 15px;
  margin-bottom: 20px;

  .title {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #333333;
    margin-bottom: 10px;

    &::before {
      padding-left: 3px;
      margin-right: 8px;
      content: '';
      height: 100%;
      background-color: var(--vc-color-primary);
    }
  }

  :deep(.descriptions-content) {
    .vc-descriptions__label {
      color: #666666;
      background: rgba(231, 247, 243, 0.3);
    }

    .vc-descriptions__content {
      color: #111111;
    }

    .is-bordered .vc-descriptions__cell {
      // color: #282828;
      font-size: 13px;
      line-height: 18px;
      padding: 6px 7px !important;
      border: 1px solid #F6F6F6;
      border-radius: 4px !important;
    }
  }

  :deep(.companyName) {
    color: #008EF4;
    cursor: pointer;
  }

  :deep(.labels) {
    padding: 2px 5px;
    font-size: 11px;
  }
}

:deep(.vc-clamp-toggle__more) {
  color: #02C680;
}
</style>
